<template>
  <div>
    <el-container>
      <el-header style="padding: 0px;display:flex;justify-content:space-between;align-items: center">
        <div style="display: inline">
          <el-input
            placeholder="通过显示行任意列名称模糊搜索,记得回车哦..."
            clearable
            @change="keywordsChange"
            style="width: 300px;margin: 0px;padding: 0px;"
            size="mini"
            :disabled="advanceSearchViewVisible"
            @keyup.enter.native="searchEmp"
            prefix-icon="el-icon-search"
            v-model="keywords">
          </el-input>
          <el-button type="primary" size="mini" style="margin-left: 5px" icon="el-icon-search" @click="searchEmp">搜索
          </el-button>
          <el-button slot="reference" type="primary" size="mini" style="margin-left: 5px"
                     @click="showAdvanceSearchView"><i
            class="fa fa-lg" v-bind:class="[advanceSearchViewVisible ? faangledoubleup:faangledoubledown]"
            style="margin-right: 5px"></i>高级搜索
          </el-button>
        </div>
        <div style="margin-left: 5px;margin-right: 20px;display: inline">
          <el-upload
            :show-file-list="false"
            accept="application/vnd.ms-excel"
            action="/security/basic/importEmp"
            :on-success="fileUploadSuccess"
            :on-error="fileUploadError" :disabled="fileUploadBtnText=='正在导入'"
            :before-upload="beforeFileUpload" style="display: inline">
            <el-button size="mini" type="success" :loading="fileUploadBtnText=='正在导入'"><i class="fa fa-lg fa-level-up"
                                                                                          style="margin-right: 5px"></i>{{fileUploadBtnText}}
            </el-button>
          </el-upload>
          <el-button type="success" size="mini" @click="exportEmps"><i class="fa fa-lg fa-level-down"
                                                                       style="margin-right: 5px"></i>导出数据
          </el-button>
        </div>
      </el-header>
      <el-main style="padding-left: 0px;padding-top: 0px">
        <div>
          <transition name="slide-fade">
            <div  style="margin-bottom: 10px;border: 1px;border-radius: 5px;border-style: solid;padding: 5px 0px 5px 0px;box-sizing:border-box;border-color: #20a0ff" v-show="advanceSearchViewVisible">
              <el-row>
                <el-col :span="4">
                  私网IP地址:
                  <el-input clearable style="width: 130px" size="mini" v-color="color"  type="text"
                            placeholder="请输入私网IP地址"
                            v-model="privateIPAddress"></el-input>
                </el-col>
                <el-col :span="4">
                  目的地址:
                  <el-input  clearable style="width: 130px" size="mini" v-focus v-color="color"    placeholder="请输入目的地址"
                             v-model="destinationIPAddress"></el-input>
                </el-col>
                <el-col :span="4">
                  协议类型:
                  <el-input clearable style="width: 130px" size="mini" v-focus v-color="color"    placeholder="请输入协议类型"
                            v-model="protocolType"></el-input>
                </el-col>
                <el-col :span="4">
                  目的端口:
                  <el-input clearable style="width: 130px" size="mini" v-focus v-color="color"    placeholder="请输入目的端口"
                            v-model="destinationPort"></el-input>
                </el-col>
                <el-col :span="4">
                  访问业务说明:
                  <el-input clearable style="width: 130px" size="mini" v-focus v-color="color"    placeholder="请输入访问业务说明"
                            v-model="visitBusinessDescription"></el-input>
                </el-col>
                <el-col :span="4">
                  访问权限:
                  <el-input clearable style="width: 130px" size="mini" v-focus v-color="color"    placeholder="访问权限"
                            v-model="durationVisit"></el-input>
                </el-col>
                <el-col :span="4">
                  申 请 类 型:
                  <el-input clearable style="width: 130px" size="mini" v-focus v-color="color"    placeholder="申请类型"
                            v-model="applicationType"></el-input>
                </el-col>
                <el-col :span="4">
                  业 务 类 型:
                  <el-input clearable style="width: 130px" size="mini" v-focus v-color="color"    placeholder="业务类型"
                            v-model="businessType"></el-input>
                </el-col>
                <el-col :span="4" :offset="4">
                  <el-button size="mini" @click="cancelSearch">取消</el-button>
                  <el-button icon="el-icon-search" type="primary" size="mini" @click="searchEmp">搜索</el-button>
                </el-col>
              </el-row>
            </div>
          </transition>

          <el-table
            :data="emps"
            v-loading="tableLoading"
            border
            stripe
            @selection-change="handleSelectionChange"
            size="mini"
            style="width: 100%" :row-style="Highlight" >
            <el-table-column
              type="selection"
              align="left"
              width="45">
            </el-table-column>
            <el-table-column
              prop="businessType"
              align="left"
              width="120"
              label="业务类型">
            </el-table-column>
            <el-table-column
              prop="privateIPAddress"
              align="left"
              width="120"
              label="私网IP地址">
            </el-table-column>
            <el-table-column
              prop="destinationIPAddress"
              width="160"
              label="目的地址">
            </el-table-column>
            <el-table-column
              prop="protocolType"
              width="100"
              align="left"
              label="协议类型">
            </el-table-column>
            <el-table-column
              prop="destinationPort"
              width="90"
              align="left"
              show-overflow-tooltip="true"
              label="目的端口">
            </el-table-column>
            <el-table-column
              prop="visitBusinessDescription"
              width="150"
              show-overflow-tooltip="true"
              align="left"
              label="访问业务说明">
            </el-table-column>
            <el-table-column
              prop="durationVisit"
              width="150"
              show-overflow-tooltip="true"
              label="访问权限">
            </el-table-column>
            <el-table-column
              width="120"
              prop="applicationType"
              show-overflow-tooltip="true"
              label="申请类型">
            </el-table-column>
            <el-table-column
              prop="remarks"
              width="180"
              align="left"
              show-overflow-tooltip="true"
              label="备注">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button type="danger" style="padding: 3px 4px 3px 4px;margin: 2px" size="mini"    @click="deleteEmp(scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="display: flex;justify-content: space-between;margin: 2px">
            <el-button type="danger" size="mini" v-if="emps.length>0" :disabled="multipleSelection.length==0"    @click="deleteManyEmps">批量删除
            </el-button>
            <el-pagination
              background
              :page-size="15"
              :current-page="currentPage"
              @current-change="currentChange"
              layout="total,prev, pager, next, jumper"
              :total="totalCount">
            </el-pagination>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        emps: [],
        keywords: '',
        privateIPAddress: '',
        destinationIPAddress: '',
        protocolType: '',
        destinationPort: '',
        visitBusinessDescription: '',
        durationVisit: '',
        applicationType: '',
        remarks: '',
        businessType: '',
        fileUploadBtnText: '导入数据',
        beginDateScope: '',
        faangledoubleup: 'fa-angle-double-up',
        faangledoubledown: 'fa-angle-double-down',
        dialogTitle: '',
        multipleSelection: [],
        depTextColor: '#c0c4cc',
        totalCount: -1,
        currentPage: 1,
        tableLoading: false,
        advanceSearchViewVisible: false,
        emp: {
          keywords: '',
          privateIPAddress: '',
          destinationIPAddress: '',
          protocolType: '',
          destinationPort: '',
          visitBusinessDescription: '',
          durationVisit: '',
          applicationType: '',
          remarks: '',
          businessType: ''
        }
      };
    },
    mounted: function () {
      this.initData();
      this.loadEmps();
    },
    methods: {
      Highlight({row, rowIndex}){
        if(row.resulttype=='1'){
          return{
            "color":"red"
          }
        }
      },
      fileUploadSuccess(response, file, fileList){
        if (response) {
          this.$message({type: response.status, message: response.msg});
        }
        this.loadEmps();
        this.fileUploadBtnText = '导入数据';
      },
      fileUploadError(err, file, fileList){
        this.$message({type: 'error', message: "导入失败!"});
        this.fileUploadBtnText = '导入数据';
      },
      beforeFileUpload(file){
        this.fileUploadBtnText = '正在导入';
      },
      exportEmps(){
        window.open("/security/basic/exportEmp", "_parent");
      },
      cancelSearch(){
        this.advanceSearchViewVisible = false;
        this.emptyEmpData();
        this.privateIPAddress= '';
        this.destinationIPAddress= '';
        this.protocolType= '';
        this.destinationPort= '';
        this.visitBusinessDescription= '';
        this.durationVisit= '';
        this.applicationType= '';
        this.remarks= '';
        this.businessType= '';
        this.loadEmps();
      },
      showAdvanceSearchView(){
        this.advanceSearchViewVisible = !this.advanceSearchViewVisible;
        this.keywords = '';
        if (!this.advanceSearchViewVisible) {
          this.emptyEmpData();
          this.beginDateScope = '';
          this.loadEmps();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      deleteManyEmps(){
        this.$confirm('此操作将删除[' + this.multipleSelection.length + ']条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var ids = '';
          for (var i = 0; i < this.multipleSelection.length; i++) {
            ids += this.multipleSelection[i].id + ",";
          }
          this.doDelete(ids);
        }).catch(() => {
        });
      },
      deleteEmp(row){
        this.$confirm('此操作将永久删除[' + row.unitname + '], 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.doDelete(row.id);
        }).catch(() => {
        });
      },
      doDelete(ids){
        this.tableLoading = true;
        var _this = this;
        this.deleteRequest("/security/basic/security/" + ids).then(resp=> {
          _this.tableLoading = false;
          if (resp && resp.status == 200) {
            var data = resp.data;
            _this.loadEmps();
          }
        })
      },
      keywordsChange(val){
        if (val == '') {
          this.loadEmps();
        }
      },
      searchEmp(){
        this.currentPage =1; //注意，一定要重置下，否则会存在问题；
        this.loadEmps();
      },
      currentChange(currentChange){
        this.currentPage = currentChange;
        this.loadEmps();
      },
      loadEmps(){
        var _this = this;
        this.tableLoading = true;
        this.getRequest("/security/basic/security?page=" + this.currentPage + "&size=15&keywords=" +this.keywords +
          "&privateIpAddress=" + this.privateIPAddress + "&destinationIPAddress=" + this.destinationIPAddress
           + "&protocolType=" + this.protocolType + "&destinationPort=" + this.destinationPort +
           "&visitBusinessDescription=" + this.visitBusinessDescription + "&durationVisit=" +
           this.durationVisit + "&applicationType=" + this.applicationType+ "&remarks=" + this.remarks+ "&businessType=" + this.businessType).then(resp=> {
          this.tableLoading = false;
          if (resp && resp.status == 200) {
            var data = resp.data;
            _this.emps = data.emps;
            _this.totalCount = data.count;
//            _this.emptyEmpData();
          }
        })
      },
      initData(){
        var _this = this;
        this.getRequest("/security/basic/security").then(resp=> {
          if (resp && resp.status == 200) {
            var data = resp.data;
          }
        })
      },
      emptyEmpData(){
        this.emp = {
          privateIPAddress: '',
          destinationIPAddress: '',
          protocolType: '',
          destinationPort: '',
          visitBusinessDescription: '',
          durationVisit: '',
          applicationType: '',
          remarks: '',
          businessType: ''
        }
      }
    }
  };
</script>
<style>
  .el-dialog__body {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .slide-fade-enter-active {
    transition: all .8s ease;
  }

  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-enter, .slide-fade-leave-to {
    transform: translateX(10px);
    opacity: 0;
  }
</style>
